<template>
	<!-- 已登录 -->
	<div v-if="isLogin">
		<!-- 用户信息 -->
		<van-cell center class="member">
			<template #icon>
				<van-image :src="avatar" width="80px" round></van-image>
			</template>
			<template #title>
				<span class="title">{{ user.name }}</span>
			</template>
		</van-cell>
		<!-- 用户课操作功能列表 -->
		<van-cell v-for="(item, i) of cellItems" :key="i" :icon="item.img" :title="item.title" is-link
			:to="{name:item.name}" />
		<van-cell @click="onClickLogout" icon="user-o" title="退出登录" is-link />
	</div>
	<!-- 未登录 -->
	<div v-else>
		<!-- 用户信息 -->
		<van-cell center class="member" is-link to="login">
			<template #icon>
				<van-image :src="avatar_default" width="80px"></van-image>
			</template>
			<template #title>
				<span class="title">登录 / 注册</span>
			</template>
		</van-cell>
	</div>
</template>

<script>
	// Vue3 + vite 加载图片资源
	import avatar_default from "@/assets/images/avatar_default.png"
	import { useUserStore } from '@/stores/user.js';
	const userStore = useUserStore();
	//import { getTokenLocal, getUserLocal, removeTokenLocal } from "@/utils/auth.js"
	import { getDetailByIdAPI } from "@/api/user.js";
	import { showToast } from 'vant';
	export default {
		data() {
			return {
				user: {},
				avatar_default: avatar_default,
				avatar: "",
				isLogin: false,
				cellItems: [{
						title: "我的订单",
						name: "orderList",
						img: "orders-o",
					},
					{
						title: "收货地址",
						name: "addressList",
						img: "envelop-o",
					},
					{
						title: "我的收藏",
						name: "working",
						img: "point-gift-o",
					},
					{
						title: "个人资料",
						name: "profile",
						img: "user-o",
					},
					{
						title: "修改密码",
						name: "updatePwd",
						img: "records",
					},
				],
			};
		},

		//初始页面数据
		mounted() {
			this.user = userStore.theUser;
			this.avatar = this.avatar_default;

			//判断是否用户登录，看Token是否为空
			let token = userStore.theToken;
			this.isLogin = token ? true : false;

			if (this.isLogin) {
				getDetailByIdAPI(this.user.id).then(result => {
					this.avatar = this.APIDomainName + result.data.avatar;
				}).catch(() => {});
			}
		},

		methods: {
			//点击用户退出事件
			onClickLogout() {
				userStore.logout();
				this.avatar = this.avatar_default;
				showToast("退出成功");
				this.isLogin = false;
			},
		},
	};
</script>

<style lang="less" scoped>
.member {
  margin: 20px 15px;
  padding: 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.2);
  
  .van-image {
    border: 3px solid rgba(255,255,255,0.2);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
}

.title {
  padding-left: 15px;
  font-size: 22px;
  font-weight: 600;
  color: white;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

// 功能列表样式
.van-cell {
  margin: 8px 15px;
  border-radius: 12px;
  transition: all 0.3s;
  border-left: 4px solid #6366f1;
  
  &:hover {
    transform: translateX(8px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
  }
  
  // 退出登录特殊样式
  &[title="退出登录"] {
    color: #ef4444;
    border-left-color: #ef4444;
    
    .van-icon {
      color: #ef4444;
    }
  }
}

// 未登录状态调整
.van-cell__title span {
  font-size: 20px;
  letter-spacing: 1px;
}
</style>